<template>
    <uni-card>
        <view class="addpropbox">
            <uni-forms :modelValue="propItem" ref="propItem" label-width="80px">
                <uni-forms-item label="上级数据" required name="pid" v-if="!propItem.id">
                    <view style="display: flex;align-items: center;height: 100%;">
                        <picker mode = "selector"
                        :range="proplist" 
                        range-key="title" 
                        @change="selproptype">
                             <view style="display: flex;align-items: center;">
                                 <text class="client_name">{{propItem.p_name || "作为一级"}}</text>    &nbsp;&nbsp;&nbsp;&nbsp;<uni-icons type="bottom" size="18"></uni-icons>
                             </view>
                         </picker>
                    </view>                        
                </uni-forms-item>
                <!-- 作为一级 -->
                <template v-if="propItem.pid === ''">
                    <uni-forms-item label="道具图片" required name="thumb">
                        <view style="display: flex;align-items: center;height: 100%;" @click="$navto('/pages/common/imglist')">
                            <template v-if="propItem.thumb">
                                <image class="thumb" :src="propItem.thumb" mode="widthFix"></image>
                            </template>
                            <template v-else>
                                <uni-icons type="image" size="60"></uni-icons>
                            </template>
                        </view>
                    </uni-forms-item>
                    
                    <uni-forms-item label="道具名称" required name="title">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.title" placeholder="道具名称" />         
                    </uni-forms-item>
                     
                </template>
                <!-- 作为二级 -->
                <template v-else>
                    <uni-forms-item label="图纸编号" name="drawing">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.drawing" placeholder="图纸编号" />
                    </uni-forms-item>
                    <uni-forms-item label="生产位置" required name="position">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.position" placeholder="生产位置" />
                    </uni-forms-item>
                    <uni-forms-item label="具体部件" name="title">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.title" placeholder="具体部件" />
                    </uni-forms-item>
                    <uni-forms-item label="数量" required name="num">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.num" placeholder="数量" />
                    </uni-forms-item>
                    <uni-forms-item label="单位" required name="unit">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.unit" placeholder="单位" />
                    </uni-forms-item>
                    <uni-forms-item label="规格" required name="spec">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.spec" placeholder="规格" />
                    </uni-forms-item>
                    <uni-forms-item label="描述" required name="desc">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.desc" placeholder="描述" />
                    </uni-forms-item>
                    <uni-forms-item label="备注" name="msg">
                        <uni-easyinput style="width: 450rpx;" v-model="propItem.msg" placeholder="备注" />
                    </uni-forms-item>
                </template>
                <view class="btns">
                    <button type="primary" size="mini" @click="addprop('propItem')">
                        <template v-if="propItem.id">
                            编辑
                        </template>
                        <template v-else>
                            添加
                        </template>
                    </button>
                </view>
            </uni-forms>
        </view>
    </uni-card>
</template>

<script>
    
    var def_prop = {
        id:0,
        pid:'',
        thumb:'',
        title:'',
        drawing:'',
        position:'',
        num:1,
        unit:'件',
        spec:"",
        desc:'',
        msg:'',
        p_name:'',
        p_index:''
    }
    export default{
        name:"propfrom",
        data(){
            return{
                proplist:[],
                propItem:new Object(def_prop),
                oid:''
            }
        },
        onLoad(option) {
            this.oid = option.oid
            if(option.id){
                this.$api.get(`prop/getdesc?id=${option.id}&type=${option.type}`).then(({data})=>{
                    this.propItem = data
                })   
            }
        },
        onShow(){
            this.getlists()
            var _this = this
            uni.$on('thethumb',function(data){
                console.log('监听到事件来自返回的参数：' , data);
                // TODO 下面执行刷新的方法
                _this.propItem.thumb = data.data
            })
        },
        methods:{

            getlists(){
                this.$api.get(`prop/getonelist?oid=${this.oid}`).then(({data})=>{
                    this.proplist = data
                })
            },
            selproptype(e){
                if(e.detail.value>0){
                    var item = this.proplist[e.detail.value]
                    this.propItem.p_name = item.title
                    this.propItem.pid = item.id
                    this.propItem.p_index = e.detail.value
                }
               
            },
            addprop(ref){
                this.$refs[ref].validate().then(res => {
                   if(this.propItem.p_index!==''){
                       if(!this.propItem.spec){
                           this.$error("请完善规格")
                           return
                       }
              
                    
                    }
                    this.propItem.oid = this.oid
                    this.$api.post(`prop/post`,this.propItem).then((res)=>{
                        uni.navigateBack({data:1})
                    })
                
                }).catch(err => {
                    console.log('err', err);
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .thumb{
        width: 125rpx;
        height: 125rpx;
    }
</style>